import React, { memo } from 'react';
// import * as motion from "motion/react-client"
import { motion } from 'framer-motion';


const draw = {
  hidden: { pathLength: 0, opacity: 0 },
  visible: (i) => {
      const delay = i * 0.5
      return {
          pathLength: 1,
          opacity: 1,
          transition: {
              pathLength: { delay, type: "spring", duration: 1.5, bounce: 0 },
              opacity: { delay, duration: 0.01 },
          },
      }
  },
}

const Logo = memo(() => {

  return (
<motion.svg
            width="100"
            height="100"
            viewBox="0 0 100 100"
            initial="hidden"
            animate="visible"
            style={image}
        >
            <motion.circle
                className="circle-path"
                cx="20"
                cy="20"
                r="20"
                stroke="#ff0088"
                variants={draw}
                custom={1}
                style={shape}
            />
            <motion.line
                x1="44"
                y1="0"
                x2="84"
                y2="44"
                stroke="#4ff0b7"
                variants={draw}
                custom={2}
                style={shape}
            />
            <motion.line
                x1="44"
                y1="44"
                x2="84"
                y2="0"
                stroke="#4ff0b7"
                variants={draw}
                custom={2.5}
                style={shape}
            />
            <motion.rect
                width="100"
                height="40"
                x="0"
                y="45"
                rx="5"
                stroke="#0d63f8"
                variants={draw}
                custom={3}
                style={shape}
            />
        </motion.svg>
  )
})


const image = {
  maxWidth: "80vw",
}

const shape = {
  strokeWidth: 10,
  strokeLinecap: "round",
  fill: 'transparent',
}

export default Logo;